import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import { createPinia } from "pinia";
import ElementPlus, { ElMessage } from "element-plus";
import VueParticles from "vue3-particles";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import Avue from '@smallwei/avue';
import '@smallwei/avue/lib/index.css';
import '@/mock'
import "element-plus/dist/index.css";


const app = createApp(App);


// 1. 给绑定的元素添加事件
// 2. 点击按钮出现输入框
// 3. 设置位置
// 4. 对textarea.value进行赋值
// 5.  添加节点,选中
// 6.拷贝
// 7.根据拷贝的结果来判断
app.directive("copy", {
  mounted(el, { value }) {
    el.addEventListener("click", () => {
      const text = document.createElement("textarea");
      text.style.width = "200px";
      text.style.height = "200px";
      text.style.position = "absolute";
      text.style.top = "100px";
      text.style.left = "4000px";

      text.value = value;
      document.body.appendChild(text);
      text.select();
      const res = document.execCommand("Copy");
      if (res) {
        ElMessage({
          message: "拷贝成功",
          type: "success",
        });
      } else {
        ElMessage({
          message: "拷贝失败",
          type: "warning",
        });
      }
    });
  },
});

app.directive("error", {
  mounted(el, { value }) {
    const img = new Image()
    const errorImg = "https://img1.baidu.com/it/u=3477470254,523159555&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
    img.src = value
    img.onload = () => {
      el.src = value
    }
    img.onerror = () => {
      el.src = errorImg
    }
  }
})

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}

app
  .use(router)
  .use(createPinia())
  .use(ElementPlus)
  .use(Avue)
  .use(VueParticles)
  .mount("#app");
